<template>
  <div id="all">
    <div class="top">
      <p>
        {{ item.name }}
        {{ item.phone }}
      </p>
      <p>
        {{ item.region.province }}
        {{ item.region.city }}
        {{ item.region.region }}
        {{ item.detail }}
      </p>
    </div>
    <div class="bottom">
      <div class="left">
        <input type="radio" name="check" :checked="flag" @click="setDefaultAddress(item.address_id)">默认
      </div>
      <div class="right">
        <van-icon name="records-o" />编辑
        <van-icon name="delete-o" />删除
      </div>
    </div>
  </div>
</template>

<script>
import { setDefaultAddress } from '@/api/address.js'
import { mapState } from 'vuex'
import { setUserDefaultAddress } from '@/utils/userDefaultAddressLocal'
export default {
  data () {
    return {
      flag: false
    }
  },
  computed: {
    ...mapState('cart', ['userDefaultAddress'])
  },
  methods: {
    // 设置用户默认收货地址
    async setDefaultAddress (id) {
      const result = await setDefaultAddress(id)
      console.log(result)
      this.$store.commit('cart/setDefaultAddress', this.item)
      setUserDefaultAddress(this.item)
    }
  },
  props: {
    item: Object
  },
  mounted () {

  }
}
</script>

<style scoped>
#all {
  background:white;
  line-height:40px;
  margin-top:10px;
  padding:10px;
}
.all .top {
  border-bottom:1px solid pink;
}
.all .bottom {
  display:flex;
  justify-content:space-between;
}
</style>
